<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>作者投稿</title>
    <link rel="icon" href="../../img/logoimg.png" type="image/ico">
</head>
<script type="text/javascript" src="../../js/jquery-3.6.0.min.js"></script>
<link href="../../js/bootstrap-fileinput/bootstrap-3.3.4-dist/css/bootstrap.min.css" rel="stylesheet">
<link href="../../js/bootstrap-fileinput/css/fileinput.min.css" rel="stylesheet">
<script type="text/javascript" src="../../js/jquery-3.6.0.min.js"></script>
<script src="../../js/bootstrap-fileinput/js/fileinput.min.js"></script>
<script src="../../js/bootstrap-fileinput/js/fileinput_locale_zh.js"></script>
<script src="../../js/bootstrap-fileinput/bootstrap-3.3.4-dist/js/bootstrap.min.js"></script>

<body style="background: #f7f1e3;">
<form>
    <b onclick="backurl()">>返回</b>  &nbsp;
    <input type="hidden" name="author.aId" th:value="${aid}">
    <input type="hidden" name="blUserid" th:value="${application.user.UId}">
    <table border="2" class="addBookList" style="width: 70%">
        <tr>
            <td style="width: 100px; background: black; color: white;">作品名称：</td>
            <td>
                <input type="text" name="blName" placeholder="请输入作品名称，最多20个字" style="width: auto;">
            </td>
        </tr>
        <tr>
            <td style="width: 100px; background: black; color: white;">作品类型：</td>
            <td>
                <select id="bigType" name="type.tId" onchange="getSmallType()">
                    <option value="-1">-请选择一级分类-</option>
                    <option  th:each="type:${typeList}"  th:if="${type.pId <= 0}" th:value="${type.tId}" th:text="${type.tName}"></option>
                </select>
                <select id="smallType" name="type.tId" onclick="checkType()">
                    <option value="-1">-请选择二级分类-</option>
                </select>
            </td>
        </tr>
        <tr>
            <td style="width: 100px; background: black; color: white;">作品标签：</td>
            <td>
                <div id="getKeywords">

                </div>
            </td>
        </tr>
        <tr>
            <td style="width: 100px; background: black; color: white;">作品状态：</td>
            <td>
                <input type="radio" name="blSpeed" value="1" >连载中
                <input type="radio" name="blSpeed" value="0" >已完结
            </td>
        </tr>
       <tr>
            <td style="width: 100px; background: black; color: white;">作品简介：</td>
            <td>
                <textarea name="blInfo" >

                </textarea>
            </td>
        </tr>
        <tr>
            <td style="width: 100px; background: black; color: white;">选择封面：</td>
            <td>
                <input type="hidden" id="testimg" name="fileInfo.fUrl" />
                <input type="file" multiple class="projectfile" accept="image/*" name="img" id="headImg">
            </td>
        </tr>
        <tr>
            <td colspan="2">
              <input type="button" class="btn btn-success" value="保存" onclick="addBookList()">
            </td>
        </tr>

    </table>
</form>
</body>
<script>
    $(function(){
        getKeywords();
    })
    function addBookList(){
        var f1 = checkWords();
        if (f1){
            $.ajax({
                url:"addBookList",
                type:"post",
                data: $("form").serialize(),
                success:function (){
                    location.href = "authorCenter";
                },error:function (){
                    alert("新增书籍失败，请重试");
                }
            })
        }

    }

    function backurl(){
        window.history.back();
    }
    function getSmallType(){
        var pid = $("#bigType").val();
        $.ajax({
            url:"getSmallType",
            type:"post",
            data:{"pid":pid},
            dataType:"json",
            success:function (data){
                let str = "<option value='-1'>-请选择二级分类-</option>";
                for (let i = 0; i < data.length; i++) {
                    str += "<option value='" + data[i].tid +"'>" + data[i].tname + "</option>"
                }
                $("#smallType").html(str);

            }
        })

    }
    function checkType(){
        if ($("#bigType").val() == -1){
            alert("请先选择一级分类");
        }
    }
    function getKeywords(){
        $.ajax({
            url:"queryKeywords",
            type:"post",
            dataType: "json",
            success:function (data){
                var str="";
                for (let i = 0; i < data.length; i++) {
                    str+="<input type='checkbox' name='kId' onclick='checkWords()' value='"+data[i].kid+"'>"+data[i].kname+"&nbsp;&nbsp;&nbsp;&nbsp;" ;
                }
                $("#getKeywords").html(str);
            },error:function (){
                alert("关键词获取失败！")
            }
        })
    }
    function checkWords(){
        var len= $("input[name='kId']:checked").length;
        if(len>3){
            alert("最多选择三个标签！");
            return false;
        }
        return true;
    }


    //文件上传插件
    $('#headImg').fileinput({
        language: 'zh', //设置语言
        uploadUrl: 'upload', //上传的地址
        allowedFileExtensions: ['jpg', 'gif', 'png'],//接收的文件后缀
        showUpload: true, //是否显示上传按钮
        showCaption: false,//是否显示标题
        browseClass: "btn btn-primary", //按钮样式
        dropZoneEnabled: false,//是否显示拖拽区域
        //minImageWidth: 50, //图片的最小宽度
        //minImageHeight: 50,//图片的最小高度
        //maxImageWidth: 1000,//图片的最大宽度
        //maxImageHeight: 1000,//图片的最大高度
        //maxFileSize: 0,//单位为kb，如果为0表示不限制文件大小
        //minFileCount: 0,
        maxFileCount: 2, //表示允许同时上传的最大文件个数
        enctype: 'multipart/form-data',
        validateInitialCount:true,
        previewFileIcon: "<i class='glyphicon glyphicon-king'></i>",
        msgFilesTooMany: "选择上传的文件数量({n}) 超过允许的最大数值{m}！",

    }).on('fileuploaded', function(event, data, previewId, index) {
        var imgval = $('#testimg').val();
        if(imgval == null || imgval == "" || imgval == undefined){
            imgval = data.response.img;
        }else{
            imgval = data.response.img;
        }
        $('#testimg').val(imgval);

    });


</script>
</html>